﻿<script setup lang="ts" name="PageAddEdit">
import DrawerWrap from '../DrawerWrap/index.vue'
import useDictionaryEntry from '@/hooks/useDictionaryEntry'
const { getDictionaryEntryData } = useDictionaryEntry()
const props = defineProps({
  deviceList: { type: Array as any },
  pageTypeList: { type: Array as any },
  industryList: { type: Array as any }
})
const pageCategory = ref('')
const formResult = ref({
  industry: [],
  lang: '',
  type: 'index',
  device: '',
  name: '',
  remark: '',
  filename: '',
  isEnable: true
})

const getDeviceData = (data) => {
  let result = ''
  props.deviceList.forEach((item) => {
    if (item.label === data) {
      result = item.value
    }
  })
  return result
}
const getPageTypeData = (data) => {
  let result = ''
  props.pageTypeList.forEach((item) => {
    if (item.label === data) {
      result = item.value
    }
  })
  return result
}
const getIndustryValue = (data) => {
  let result = []
  props.industryList.forEach((item) => {
    if (item.label === data) {
      result = [item.value]
    }
  })
  return result
}
const drawerWrap = ref(null)
// 显示新建/编辑页面表单抽屉弹窗
const showDrawerWrap = (v) => {
  console.log(v, '显示页面编辑抽屉')
  getLanguageList()
  drawerWrap.value.showDrawer(v)
  pageCategory.value = v.category
  if (v.type === 'edit') {
    formResult.value.industry = getIndustryValue(v.options.industry)
    formResult.value.device = getDeviceData(v.options.device)
    formResult.value.type = getPageTypeData(v.options.pageType)
    formResult.value.name = v.options.title
    formResult.value.filename = v.options.filename
    formResult.value.remark = v.options.description
    formResult.value.isEnable = v.options.status
  } else {
    formResult.value.industry = getIndustryValue(v.options.industry)
    formResult.value.device = getDeviceData(v.options.device)
    formResult.value.name = ''
    formResult.value.type = 'index'
    formResult.value.remark = ''
    formResult.value.filename = ''
    formResult.value.isEnable = true
  }
}
// 子组件将方法暴露给父组件
defineExpose({ showDrawerWrap })

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
// 预览图删除事件
const handleRemove = (file) => {
  console.log(file)
}
// 预览图预览事件
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const languageList = ref([])
const getLanguageList = async () => {
  console.log('获取状态数据')
  languageList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'language'
  })
}
</script>

<template>
  <DrawerWrap ref="drawerWrap">
    <el-form class="website-page-module-form" label-width="auto" label-position="right">
      <el-form-item label="页面昵称">
        <el-input v-model="formResult.name" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="文件名称">
        <el-input v-model="formResult.filename" placeholder="请输入文件名" />
      </el-form-item>
      <el-form-item label="页面类型">
        <el-select v-model="formResult.type" placeholder="选择页面类型">
          <el-option v-for="item in pageTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="语言">
        <el-select v-model="formResult.lang" placeholder="选择语言">
          <el-option v-for="item in languageList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属行业" class="industry">
        <el-checkbox-group v-model="formResult.industry" :disabled="pageCategory === 'websitePage'">
          <el-checkbox-button v-for="(item, index) in industryList" :key="index" :label="item.value">{{ item.label }}</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="平台">
        <el-radio-group class="radio-button" v-model="formResult.device" :disabled="pageCategory === 'websitePage'">
          <el-radio-button v-for="(item, index) in deviceList" :key="index" :label="item.value">{{ item.label }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否启用" v-if="pageCategory === 'websitePage'">
        <el-switch v-model="formResult.isEnable" />
      </el-form-item>
      <el-form-item label="预览图" class="preview-img">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon>
            <Plus />
          </el-icon>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="页面备注">
        <el-input v-model="formResult.remark" type="textarea" placeholder="请输入页面特点描述" />
      </el-form-item>
    </el-form>
    <el-dialog class="image-preview-dialog" v-model="dialogVisible">
      <img :src="dialogImageUrl" alt="预览图" />
    </el-dialog>
  </DrawerWrap>
</template>

<style scoped lang="scss"></style>
